<template>
  <!-- VIP配置 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="VIP配置" width="70%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="mailForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='vip_level'" label="" prop="vip_level">
              <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.vip_level" controls-position="right" clearable placeholder="请输入VIP等级"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_upgrade_water'" label="" prop="vip_upgrade_water">
              <el-input-number :min="0" :max="999999999999999" :precision="0" v-model="formParams.vip_upgrade_water" controls-position="right" clearable placeholder="请输入VIP升级下注" />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='waterproof_ratio'" label="" prop="waterproof_ratio">
              <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.waterproof_ratio" controls-position="right" clearable placeholder="请输入返水比例"/><span class="colorRed">(万分比)</span>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_weekly_time'" label="" prop="vip_weekly_time">
              <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.vip_weekly_time" controls-position="right" clearable placeholder="请输入周礼包购买次数"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_weekly_imediategift'" label="" prop="imediategift_min">
              <el-select class="width150" v-model="formParams.imediategift_min" placeholder="请选择道具类型" filterable >
                <el-option :label="third.label" :value="third.value" v-for="(third, three) in propDataArray" :key="three"></el-option>
              </el-select>
                —
              <el-input-number class="width180" :min="0" :max="999999999999999" :precision="0" v-model="formParams.imediategift_max" controls-position="right" clearable placeholder="请输入周礼包购买筹码奖励" />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_weekly_commodity'" label="" prop="vip_weekly_commodity">
              <el-select v-model="formParams.vip_weekly_commodity" placeholder="请选择礼包商品" filterable >
                <el-option v-show="!second.goods_keys && second.activity_type==1000 && second.goods_type==3" :label="'【'+second.value+'】'+second.label" :value="second.value" v-for="(second, two) in goodsData" :key="two"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_weekly_chippic'" label="" prop="vip_weekly_chippic" style="height:120px">
              <imgUpLoad :url="formParams.vip_weekly_chippic" @success='imgUploadChangIcon'/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='upgrade_lottery'" label="" prop="upgrade_lottery" style="height:auto">
              <div class="btn-box-add" v-show="!upgradePropData.length" style="margin-right:-10px;margin-left:-10px;margin-top:-10px">
                <el-tooltip content="新增升级奖励道具配置">
                  <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addUpgradeProp(),upgradeIndex=0"/>
                </el-tooltip>
              </div>
              <div class="flex marginB10" v-for="(second,two) in upgradePropData" :key="two">
                <div class="btn-box-add" style="margin-right:-10px;margin-left:-10px;">
                  <el-tooltip content="新增升级奖励道具配置" v-show="upgradeIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addUpgradeProp"/>
                  </el-tooltip>
                </div>
                <el-form-item label="选择道具:" label-width="90px">
                  <el-select v-model="second.type" placeholder="请选择道具类型" filterable >
                    <el-option :label="third.label" :value="third.value" v-for="(third, three) in propDataArray" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数量:" label-width="50px">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="second.num" controls-position="right" clearable placeholder="请输入道具数量"/>
                </el-form-item>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除配置" v-show="upgradePropData.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteUpgradeProp(two)"/>
                  </el-tooltip>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='vip_weekly_daygift'" label="" prop="vip_weekly_daygift" style="height:auto">
              <div class="btn-box-add" v-show="!dayPropData.length" style="margin-right:-10px;margin-left:-10px;margin-top:-10px">
                <el-tooltip content="新增登录天数筹码奖励">
                  <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addDayProp(),dayIndex=0"/>
                </el-tooltip>
              </div>
              <div class="flex marginB10" v-for="(second,two) in dayPropData" :key="two">
                <div class="btn-box-add" style="margin-right:-5px;margin-left:-10px;">
                  <el-tooltip content="新增登录天数筹码奖励" v-show="dayIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addDayProp"/>
                  </el-tooltip>
                </div>
                <el-form-item label="Start:" label-width="50px">
                  <el-input-number class="width130" :min="0" :max="999999999" :precision="0" v-model="second.min" controls-position="right" clearable placeholder="请输入天数"/>
                </el-form-item>
                <el-form-item label="End:" label-width="50px">
                  <el-input-number class="width130" :min="0" :max="999999999" :precision="0" v-model="second.max" controls-position="right" clearable placeholder="请输入天数"/>
                </el-form-item>
                <el-form-item label="选择道具:" label-width="90px">
                  <el-select class="width150" v-model="second.type" placeholder="请选择道具类型" filterable >
                    <el-option :label="third.label" :value="third.value" v-for="(third, three) in propDataArray" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="筹码数量:" label-width="90px">
                  <el-input-number class="width150" :min="0" :max="999999999" :precision="0" v-model="second.num" controls-position="right" clearable placeholder="请输入筹码数量"/>
                </el-form-item>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除配置" v-show="dayPropData.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteDayProp(two)"/>
                  </el-tooltip>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('mailForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addVip,
  editVip
} from "@/api/game";
import imgUpLoad from '@/components/imgUpLoadSingle'
export default {
  components: {
    imgUpLoad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    goodsData: {
      type: Array,
      default: function () {
        return []
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: 'VIP等级', key: 'vip_level',pass:true },
        { label: 'VIP升级下注', key: 'vip_upgrade_water',pass:true },
        { label: '返水比例', key: 'waterproof_ratio',pass:true },
        { label: '周礼包购买次数', key: 'vip_weekly_time',pass:true },
        { label: '购买筹码奖励', key: 'vip_weekly_imediategift' },
        { label: '周礼包商品id', key: 'vip_weekly_commodity' },
        { label: '周礼包筹码背景图片', key: 'vip_weekly_chippic'},
        { label: '升级奖励', key: 'upgrade_lottery' },
        { label: '登录天数筹码奖励配置', key: 'vip_weekly_daygift' },
      ],
      upgradePropData:[{type:1,num:0}],
      upgradeIndex:0,
      dayPropData:[{min:0,max:0,type:5,num:0}],
      dayIndex:0,
      formParams: {
        vip_level: 0, //vip等级
        vip_icon: '', //vip等级图标（对应游戏端图片等级）
        vip_upgrade_water: 0, //vip升级下注
        upgrade_lottery: '', //升级奖励
        waterproof_ratio: '', //返水比例
        vip_weekly_time: 0, //周礼包购买次数
        vip_weekly_commodity: 0, //周礼包商品id
        vip_weekly_chippic: '', //周礼包筹码背景图片
        vip_weekly_imediategift: '', //vip筹码奖励
        imediategift_min: '',
        imediategift_max: '',
        vip_weekly_daygift: '' //vip筹码登录奖励
      },
      ruleForm: {
        vip_level: [{ required: true, trigger: 'blur', message: '请输入VIP等级', }],
        vip_upgrade_water: [{ required: true, trigger: 'blur', message: '请输入VIP升级下注', }],
        waterproof_ratio: [{ required: true, trigger: 'blur', message: '请输入VIP返水比例', }],
        vip_weekly_time: [{ required: true, trigger: 'blur', message: '请输入VIP购买周礼包次数', }],
        vip_weekly_commodity: [{ required: true, trigger: 'blur', message: '请上传VIP周礼包筹码背景图片', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.data.imediategift_min=1
        that.data.imediategift_max=0
        that.formParams = JSON.parse(JSON.stringify(that.data))
        if(that.formParams.upgrade_lottery){
          that.upgradePropData=that.formParams.upgrade
          that.upgradeIndex=that.upgradePropData.length-1
        }
        if(that.formParams.vip_weekly_daygift){
          that.dayPropData=that.formParams.chip
          that.dayIndex=that.dayPropData.length-1
        }
        if(that.formParams.vip_weekly_imediategift){
          that.formParams.imediategift_min=that.formParams.imediategift[0]
          that.formParams.imediategift_max=that.$public.mathNumberDivideWan(that.formParams.imediategift[1])
        }
      } else {
        that.formParams = {
          vip_level: 0,
          vip_icon: '',
          vip_upgrade_water: 0,
          upgrade_lottery: '',
          waterproof_ratio: '',
          vip_weekly_time: '',
          vip_weekly_commodity: '',
          vip_weekly_chippic: '',
          vip_weekly_imediategift: '',
          imediategift_min: 1,
          imediategift_max: 0,
          vip_weekly_daygift: ''
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams)),
      upgradePropData=that.$public.activeNumberByWan(that.upgradePropData),
      dayPropData=that.$public.activeNumberByWan(that.dayPropData);
      params.vip_upgrade_water=that.$public.mathNumberMultiply(params.vip_upgrade_water,10000)
      params.vip_weekly_imediategift=params.imediategift_min+','+params.imediategift_max*10000
      // 升级奖励
      if(upgradePropData){
        if(upgradePropData.length==1 && upgradePropData[0].num==0){
          params.upgrade_lottery=''
        }else{
          params.upgrade_lottery=that.propSet(upgradePropData)
        }
      }else{
        params.upgrade_lottery=''
      }
      // 登录天数筹码奖励配置
      if(dayPropData){
        if(dayPropData.length==1 && dayPropData[0].min==0 && dayPropData[0].max==0 && dayPropData[0].num==0){
          params.vip_weekly_daygift=''
        }else{
          params.vip_weekly_daygift=that.chipSet(dayPropData)
        }
      }else{
        params.vip_weekly_daygift=''
      }
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params.id) {
            addVip(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editVip(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 上传图片
    imgUploadChangIcon(url){
      this.formParams.vip_weekly_chippic=url
    },
    // 新增升级道具奖励
    addUpgradeProp(){
      this.upgradeIndex++
      this.upgradePropData.push({type:1,num:0})
    },
    // 删除升级道具奖励
    deleteUpgradeProp(index){
      this.upgradeIndex--
      this.upgradePropData.splice(index,1,)
    },
    // 新增登录天数筹码奖励配置
    addDayProp(){
      this.dayIndex++
      this.dayPropData.push({min:0,max:0,type:5,num:0})
    },
    // 删除登录天数筹码奖励配置
    deleteDayProp(index,two){
      this.dayIndex--
      this.dayPropData.splice(index,1,)
    },
    // 道具设置
    propSet(arr) {
      let reward = '';
      arr.map(item=>{
        reward+=item.type+','+ item.num +';'
      })
      reward=reward.substring(0,reward.length-1)
      return reward
    },
    // 道具设置
    propBack(str) {
      let arr=this.$public.srtToArr(str),arrData=[];
      if(arr[0] && typeof(arr[0])=='string'){
        arrData.push({type:Number(arr[0]),num:Number(arr[1])})
      }else{
        arr.map(item=>{
          arrData.push({type:Number(item[0]),num:Number(item[1])})
        })
      }
      return arrData
    },
    // 筹码设置
    chipSet(arr) {
      let reward = '';
      arr.map(item=>{
        reward+=item.min+','+ item.max +'|'+item.type+','+item.num+';'
      })
      reward=reward.substring(0,reward.length-1)
      return reward
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.border-item {
  padding: 10px;
}
.box-title {
  font-size: 17px;
  font-weight: 600;
}
.btn-box-add{
  width: 50px;
  margin-right: 20px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
